<script setup>
import ForceGraph3D from '3d-force-graph';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const viewData = {
    dataList:[
        {
            id: 1,
            name: '我的个人网站',
            path: '0'
        },
        {
            id: 2,
            name: '博客',
            path: '/'
        },
        {
            id: 3,
            name: '关于',
            path: '/about'
        },
        {
            id: 4,
            name: 'ChatGPT',
            path: '/chatGpt'
        },
        {
            id: 5,
            name: '资源',
            path: '/resources'
        },
        {
            id: 6,
            name: '任务',
            path: '/task'
        },
        {
            id: 7,
            name: '系统管理',
            path: '0'
        },
        {
            id: 8,
            name: '用户管理',
            path: '/userManager'
        },
        {
            id: 9,
            name: '角色管理',
            path: '/roleManager'
        },
        {
            id: 10,
            name: '权限管理',
            path: '/authManager'
        },
        {
            id: 11,
            name: '菜单管理',
            path: '/menuManager'
        }
    ],
    linkList:[
        {
            id:1,
            pId: 1,
            cId: 2
        },
        {
            id:2,
            pId: 1,
            cId: 3
        },
        {
            id:3,
            pId: 1,
            cId: 4
        },
        {
            id:4,
            pId: 1,
            cId: 5
        },
        {
            id:5,
            pId: 1,
            cId: 6
        },
        {
            id:6,
            pId: 1,
            cId: 7
        },
        {
            id:7,
            pId: 7,
            cId: 8
        },
        {
            id:8,
            pId: 7,
            cId: 9
        },
        {
            id:9,
            pId: 7,
            cId: 10
        },
        {
            id:10,
            pId: 7,
            cId: 11
        }
    ]
}

const initialGraph = () => {
    const N = 300;
    const gData = {
    nodes: viewData.dataList,
    links: viewData.linkList
        .filter(id => id)
        .map(node => ({
        source: node.pId,
        target: node.cId
        }))
    };
    const graph = ForceGraph3D()(document.getElementById('3d-graph')).graphData(gData);
    graph.width(window.innerWidth).height(window.innerHeight - 60).nodeColor(()=>'rgb('+Math.random()*255+','+Math.random()*255+',100)')
    .onNodeClick((node)=>{router.push(node.path)})
}

onMounted(()=>{
    initialGraph()
})

    
</script>

<template>
    <main v-blog-title data-title="3D力图测试">
        <div id="3d-graph"></div>
    </main>
</template>
<style scoped>
    main{
        height: calc(100vh - 60px);
    }
</style>